<template>
    <div class="default-layout">
        <header class="header">
            <div class="header-content">
                1222222
            </div>
        </header>
        <div class="content">
            <div class="content-box">
                <nuxt />
            </div>
        </div>
        <footer-vue />
    </div>
</template>

<script>
import FooterVue from '@/components/Footer.vue'
export default {
    components: {
        FooterVue
    }
}
</script>

<style scoped>
    .default-layout {
        width: 100%;
    }
    .default-layout .header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        background: var(--primary-color);
    }
    .default-layout .header .header-content {
        width: var(--primary-width);
        height: 60px;
        background: #aaa;
    }
    .content {
        width: 100%;
        display: flex;
        justify-content: center;
        background: #686868;
    }
    .content-box {
        width: var(--primary-width);
        min-height: calc(100vh - 140px);
    }
</style>